@import 'common.less'; 

body{
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
  background: fadeout(@mainColor, 20%);
  transition: background-color 0.5s;
}
.loopcolor(1, 8);
.loopcolor (@index, @len) when (@index < @len) {
  .color-@{index}{
    background: fadeout(extract(@colors, @index), 50%);
    .icon-00@{index}{
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .loopcolor(@index+1, @len)
}
.m-header{
  text-align: right;
  padding: 1.6vw;
  overflow: hidden;
  .icon-about{
    color: @fontColorLight;
    font-size: 5.8667vw;
    padding: 1.6vw;
  }
}
.m-center{
  justify-content: space-between;
  &.z-show{
    .top{
      height: 1px;
      padding: 0;
      overflow: hidden;
    }
    .m-item-pages{
      display: flex;
    }
    .m-back{
      display: block;
    }
  }
  .top{
    display: flex;
    padding: 20px;
    justify-content: space-between;
    transition: all 0.3s;
  }
}
.m-footer{
  text-align: center;
  color: @fontColorLight;
  padding: .5em;
}
.m-datetime{
  display: inline-block;
  color: @fontColorLight;
  text-align: center;
  >.time{
    font-size: 32px;
  }
  >.date{
    font-size: 13px;
    line-height: 22px;
  }
}
.m-weather{
  line-height: 1.32;
  text-align: center;
  color: @fontColorLight;
  font-size: 13px;
  >*{
    display: block;
  }
  >.iconfont{
    font-size: 32px;
  }
  >.msg{
    line-height: 22px;
  }
}
.m-back{
  background: #00000033;
  position: absolute;
  left: 0;
  top: 50%;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  color: @fontColorLight;
  z-index: 2;
  cursor: pointer;
  display: none;
}
.m-item-tabs{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0;
  flex: 0 0 auto;
  .item{
    width: 25%;
    max-width: 64px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    &:after{
      content: '';
      display: block;
      padding-top: 100%;
    }
    >[class^="icon-"]{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 28px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      color: @fontColorLight;
      cursor: pointer;
    }
  }
  .loopbg (@index, @len) when (@index < @len){
    @ramdon: `Math.random()`;
    &:nth-child(@{index}) {
      .setbg(@ramdon * 360);
    }
    .loopbg(@index+1, @len)
  }
}
.m-item-pages{
  background: #00000033;
  padding: 20px;
  align-self: center;
  color: @fontColorLight;
  flex: 1 1 auto;
  display: none;
  min-width: 320px;
  max-width: 414px;
  position: relative;
  >.item{
    &.z-show{
      display: flex;
    }
    display: none;
    >p{
      font-size: 13px;
      padding-bottom: 10px;
    }
    >a{
      width: auto;
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      padding: .5em;
      text-align: center;
    }
  }
  .img-preview{
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center 0;
    background-repeat: no-repeat;
  }
}